<script setup>
const props = defineProps({
  t1:String,
  t2:String,
  t3:String,
  t4:String,
  t5:String,
})
let truncatedString = props.t1.substring(0, 15);
const imgUrl = "http://localhost:8080/";
</script>
<script>

</script>
<template>

  <div class="left">
    <img class="img" :src="imgUrl+t5" alt="">
  </div>
  <div class="right">
    <div class="text1">
      {{truncatedString}}...
    </div>
    <div class="text2">
      &nbsp&nbsp{{t2}}
    </div>
    <div class="text3">
      &nbsp&nbsp {{t3}}
    </div>
    <div class="text4">
      &nbsp&nbsp¥&nbsp{{t4}}&nbsp起
    </div>
  </div>


</template>

<style scoped lang="scss">

.left{
  width: 50%;
  height: 185px;
  //background: pink;
  .img{
    position: relative;
    left: 5px;
    margin: auto;
    width: 90%;
    height: 90%;
  }
}
.right{
  width: 50%;
  margin-right: 0px;
  height: 185px;
  //background:red;
}
.text1{
  height: 40px;
  font-size: 14px;
  color: #222222;
}
.text2{
  height: 16px;
  font-size: 12px;
  margin-top: 16px;
  color: #9B9B9B;
}
.text2:hover{
  color: #FF1268;
}
.text3{
  height: 16px;
  font-size: 12px;
  margin-top: 8px;
  color: #9B9B9B;
}
.text3:hover{
  color: #FF1268;
}
.text4{
  height: 21px;
  font-size: 18px;
  margin-top: 40px;
  color: #FF1268;
}
</style>